<template>
  <div>
    <!--    添加奖项弹窗-->
    <a-modal v-model="addCardShow" :title="cardTitle" @ok="addProject" @cancel="cleanText">
      <a-form>
        <a-form-item
            label="奖项名称"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="请填写奖项分类名称" v-model="projectName"/>
        </a-form-item>
        <a-form-item
            label="项目类型"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-select
              show-search
              placeholder="选择一个项目类型"
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
          >
            <a-select-option v-for="item in projectClassList" :key="item.project_class_id"
                             :value="item.project_class_id" :datafld="classDefaultValue">
              {{ item.project_class_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="评审组"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-select
              show-search
              placeholder="选择一个评审组"
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleSpecialistChange"
          >
            <a-select-option v-for="item in reviewList" :key="item.review_id" :value="item.review_id">
              {{ item.review_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="奖项人数"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <p>
            <span>一等奖</span>
            <a-input-number :min="0" :max="100" v-model="firstPrizeNum"/>
            <span>人</span>
          </p>
          <p>
            <span>二等奖</span>
            <a-input-number :min="0" :max="100" v-model="secondPrizeNum"/>
            <span>人</span>
          </p>
          <p>
            <span>三等奖</span>
            <a-input-number :min="0" :max="100" v-model="thirdPrizeNum"/>
            <span>人</span>
          </p>
        </a-form-item>
        <a-form-item
            label="奖项介绍"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-textarea placeholder="请填写该奖项简要介绍" v-model="synopsis"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="奖项总数" :content="this.awardsList.length" :bordered="true"/>
        <head-info title="一等奖" content="2类" :bordered="true"/>
        <head-info title="二等奖" content="15类"/>
        <head-info title="三等奖" content="15类"/>
      </div>
    </a-card>
    <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="奖项分类表"
    >
      <div slot="extra">
        <a-radio-group>
          <a-radio-button>全部</a-radio-button>
          <a-radio-button>一等奖</a-radio-button>
          <a-radio-button>二等奖</a-radio-button>
          <a-radio-button>三等奖</a-radio-button>
        </a-radio-group>
      </div>
      <a-button type="dashed" style="width: 100%" icon="plus" @click="showAddModal">添加</a-button>
      <a-list size="large" :dataSource="awardsList">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta
              :description=item.award_tip
          >
            <a-avatar slot="avatar" size="large" shape="square"
                      src="https://images.pexels.com/photos/302769/pexels-photo-302769.jpeg"/>
            <a slot="title">{{ item.awards_name }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="showEditCard(item)">编辑</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a @click="getProjectByAward(item.awards_id)">查看申报项目</a></a-menu-item>
                <a-menu-item><a @click="deletePrize(item.awards_id)">删除</a></a-menu-item>
              </a-menu>
              <a>更多
                <a-icon type="down"/>
              </a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>项目分类</span>
              <p>{{ item.prize_1 }}</p>
            </div>
            <div class="list-content-item">
              <span>一等奖</span>
              <p>{{ item.prize_1 }}</p>
            </div>
            <div class="list-content-item">
              <span>二等奖</span>
              <p>{{ item.prize_2 }}</p>
            </div>
            <div class="list-content-item">
              <span>三等奖</span>
              <p>{{ item.prize_3 }}</p>
            </div>
            <div class="list-content-item">
              <span>创建时间</span>
              <p>{{ creatTime }}</p>
            </div>
            <!--            <div class="list-content-item">-->
            <!--              <a-progress :percent="80" style="width: 180px" />-->
            <!--            </div>-->
          </div>
        </a-list-item>
      </a-list>
    </a-card>
    <!--    申报项目列表抽屉，具有简单的查看、初筛功能-->
    <a-drawer
        title="申报项目列表"
        placement="right"
        width="520"
        :closable="false"
        :visible="projectCardShow"
        @close="onClose"
    >
      <a-list
          class="demo-loadmore-list"
          item-layout="horizontal"
          :data-source="projectAwardList"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a slot="actions" @click="passScreen(item)" :class="[item.project_check === 1 ? 'pass' : 'normal']">通过</a>
          <a slot="actions" @click="noPassScreen(item)" :class="[item.project_check === 2 ? 'noPass' : 'normal']">不通过</a>
          <a-list-item-meta
              :description="item.project_tip"
          >
            <a slot="title" @click="goProjectInfo(item)">{{ item.project_name }}</a>
            <a-avatar
                slot="avatar"
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-drawer>
  </div>
</template>

<script>
import HeadInfo from "../../../components/tool/HeadInfo"
import Axios from 'axios'

const plainOptions = ['一等奖', '二等奖', '三等奖']
const defaultCheckedList = ['一等奖', '二等奖']
const projectNameList = ["工业建筑", "农业建筑", "居住建筑", "公共建筑", "文教建筑", "科研建筑", "医疗建筑", "园林建筑", "纪念建筑", "其他建筑类"]
const prizeList = []
for (let i = 0; i < projectNameList.length; i++) {
  prizeList.push({
    id: i,
    // 分类名
    projectName: projectNameList[i],
    // 分类介绍
    synopsis: "测试类别介绍，巴拉巴拉巴拉巴拉",
    // 一等奖人数
    firstPrizeNum: Math.floor(Math.random() * (100 - 1)) + 1,
    // 二等奖人数
    secondPrizeNum: Math.floor(Math.random() * (100 - 1)) + 1,
    // 三等奖人数
    thirdPrizeNum: Math.floor(Math.random() * (100 - 1)) + 1,
    creatTime: '',
    // 是否通过
    pass: ''
  })
  projectNameList[i] = {
    id: i,
    name: projectNameList[i]
  }
}

export default {
  name: 'Prize',
  components: {HeadInfo},
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      loading: true,
      // 分类名
      projectName: '',
      // 分类介绍
      synopsis: '',
      // 一等奖人数
      firstPrizeNum: 0,
      // 二等奖人数
      secondPrizeNum: 0,
      // 三等奖人数
      thirdPrizeNum: 0,
      // 评审组ID
      reviewTeamId: 0,
      // 项目分类ID
      projectClassId: 0,
      addCardShow: false,
      changeId: 0,
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      cardTitle: '',
      projectCardShow: false,
      // 奖项列表
      awardsList: [],
      // 项目分类列表
      projectClassList: [],
      // 所修改奖项的项目分类
      classDefaultValue: '',
      // 评审组列表
      reviewList: [],
      // 奖项旗下项目列表
      projectAwardList: [],
      prizeList,
      projectNameList,
      plainOptions,
      defaultCheckedList
    }
  },
  computed: {
    creatTime() {
      return new Date().toLocaleString()
    }
  },
  mounted() {
    // 获取所有奖项
    this.getAllAwards()
    // 获取项目分类
    Axios.get(this.url + '/pxManagerSystem/getAllProjectClass')
        .then(res => {
          this.projectClassList = res.data.data.projectClassList
        }).catch(err => {
      console.log(err)
    })
    // 获取所有评审组列表
    this.getAllReviewGroup()
  },
  methods: {
    // 获取所有奖项
    getAllAwards() {
      Axios.get(this.url + '/pxManagerSystem/getAllAwards')
          .then(res => {
            this.awardsList = res.data.data.awardslist
            console.log(this.awardsList)
          }).catch(err => {
        console.log(err)
      })
    },
    // 获取所有评审组列表 getAllReviewGroupInfos
    getAllReviewGroup() {
      Axios.get(this.url + '/pxManagerSystem/getAllReviewGroupInfos')
          .then(res => {
            this.reviewList = res.data.data.reviewGroupInfoList
          }).catch(err => {
        console.log(err)
      })
    },
    showAddModal() {
      this.addCardShow = true
      this.cardTitle = "新增奖项"
    },
    showEditCard(item) {
      this.getProjectClassById(item.project_class_id)
      this.cardTitle = "修改奖项"
      this.changeId = item.awards_id
      this.projectName = item.awards_name
      this.synopsis = item.award_tip
      this.firstPrizeNum = item.prize_1
      this.secondPrizeNum = item.prize_2
      this.thirdPrizeNum = item.prize_3
      this.addCardShow = true
    },
    cleanText() {
      this.projectName = this.synopsis = this.classDefaultValue = ""
      this.firstPrizeNum = this.secondPrizeNum = this.thirdPrizeNum = 0
    },
    // 添加奖项分类
    addProject() {
      // 修改
      if (this.cardTitle === "修改奖项") {
        this.editProject()
      } else {
        // 新增
        Axios.post(this.url + '/pxManagerSystem/addAwardInfo', {
          awards_name: this.projectName,
          review_id: this.reviewTeamId,
          project_class_id: this.projectClassId,
          prize_1: this.firstPrizeNum,
          prize_2: this.secondPrizeNum,
          prize_3: this.thirdPrizeNum,
          award_tip: this.synopsis
        }).then(res => {
          console.log(res)
          this.$message.info(res.data.message);
          this.projectName = this.synopsis = ""
          this.firstPrizeNum = this.secondPrizeNum = this.thirdPrizeNum = 0
          this.reviewTeamId = this.projectClassId = 0
          this.getAllAwards()
        }).catch(err => {
          console.log(err)
        })
      }
      this.addCardShow = false
    },
    // 修改奖项
    editProject() {
      Axios.put(this.url + '/pxManagerSystem/updateAwardInfo', {
        awards_id: this.changeId,
        awards_name: this.projectName,
        award_tip: this.synopsis,
        review_id: this.reviewTeamId,
        project_class_id: this.projectClassId,
        prize_1: this.firstPrizeNum,
        prize_2: this.secondPrizeNum,
        prize_3: this.thirdPrizeNum,
      }).then(res => {
        this.$message.info(res.data.message);
        this.projectName = this.synopsis = this.classDefaultValue = ""
        this.firstPrizeNum = this.secondPrizeNum = this.thirdPrizeNum = 0
        this.reviewTeamId = this.projectClassId = 0
        this.getAllAwards()
      }).catch(err => {
        console.log(err)
      })
    },
    // 下拉框
    handleChange(value) {
      // 获取所选项目类型id
      console.log(`selected ${value}`);
      this.projectClassId = value
    },
    handleSpecialistChange(value) {
      // 获取所选评审组id
      console.log(`selected ${value}`);
      this.reviewTeamId = value
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 关闭申报项目抽屉
    onClose() {
      this.projectCardShow = false
    },
    // 根据奖项id查找旗下项目
    getProjectByAward(id) {
      this.projectCardShow = true
      Axios.post(this.url + '/pxManagerSystem/getProjectsByAwardId', {
        awards_id: id
      }).then(res => {
        console.log(res.data)
        this.projectAwardList = res.data.data.projectByAwardId
      }).catch(err => {
        console.log(err)
      })
    },
    // 通过初筛
    passScreen(item) {
      console.log(item)
      // item.pass = 'pass'
      Axios.put(this.url + '/pxManagerSystem/updateProjectByProjectInfoId', {
        "project_info_id": item.project_info_id,
        "project_class_id": item.project_class_id,
        "project_name": item.project_name,
        "project_tip": item.project_tip,
        "project_content": item.project_content,
        "company_id": item.company_id,
        "company_user_id": item.company_user_id,
        "project_reasion": item.project_reasion,
        "project_time": item.project_time,
        "project_check": 1,
        "counts": item.counts,
        "average": item.average
      }).then(res => {
        this.$message.success(res.data.message)
        item.project_check = 1
      }).catch(err => {
        console.log(err)
      })
    },
    // 不通过初筛
    noPassScreen(item) {
      console.log(item)
      // item.pass = 'noPass'
      Axios.put(this.url + '/pxManagerSystem/updateProjectByProjectInfoId', {
        "project_info_id": item.project_info_id,
        "project_class_id": item.project_class_id,
        "project_name": item.project_name,
        "project_tip": item.project_tip,
        "project_content": item.project_content,
        "company_id": item.company_id,
        "company_user_id": item.company_user_id,
        "project_reasion": item.project_reasion,
        "project_time": item.project_time,
        "project_check": 2,
        "counts": item.counts,
        "average": item.average
      }).then(res => {
        this.$message.success(res.data.message)
        item.project_check = 2
      }).catch(err => {
        console.log(err)
      })
    },
    // 根据ID查询项目分类
    getProjectClassById(id) {
      console.log(id)
      Axios.post(this.url + '/pxManagerSystem/getProjectClassByProjectClassId', {
        project_class_id: id
      }).then(res => {
        if (res.data.state === 200) {
          this.classDefaultValue = res.data.data.projectClassList[0].project_class_name
        }else {
          this.$message.info("未找到该项目分类")
          console.log(res)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除奖项
    deletePrize(id) {
      Axios.delete(this.url + '/pxManagerSystem/deleteAwardInfo', {
        data: {
          awards_id : id
        }
      }).then(res => {
        this.$message.success(res.data.message)
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转项目详情页
    goProjectInfo(item) {
      this.$router.push({
        name: '申报项目详情',
        params: {
          project: item,
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.list-content-item {
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin: 4px 0 0;
    line-height: 22px;
  }
}

.normal {
  color: #1890ff;
}

.pass {
  color: #52c41a;
}

.noPass {
  color: #f5222d;
}
</style>
